<template>
  <view class="start">

    <input class="man" placeholder="请输入" v-model="manInput" />

    <input class="woman" placeholder="请输入" v-model="woManInput" />

    <view class="mr-commit" @click="commit" :class="sizeStatus ? 'mr-commit-big' : 'mr-commit-small'" :style="{ 'background-image': 'url(' + 
    'https://dmn000001-1301065476.cos.ap-guangzhou.myqcloud.com/sas/loveName/start-but.png'
    + ')' }"></view> 
    <LandscapeModel v-model:show="show" :sonFun="sonFun"/>

  </view>
</template>

<script setup lang="ts">
import LandscapeModel from "@/components/Landscape/LandscapeModel.vue";
import { EnumStatus } from "@/utils/constants";
import dyUserPlayingService from "@/api/dyUserPlayingService";
import { loveNAME,homophony } from "@/utils/ab";
const sizeStatus = ref(false)
const show = ref(false)
const emit = defineEmits(['update:defStatus','update:content'])
const manInput = ref()
const woManInput = ref()

const sonFun = async()=>{
    const dataList = []
    dataList[0] = await loveNAME(manInput.value,woManInput.value)
    dataList[1] = await homophony(manInput.value)
    dataList[2] = await homophony(woManInput.value)
    dataList[3] = manInput.value
    dataList[4] = woManInput.value
    emit('update:defStatus',EnumStatus.RESULT)
    emit('update:content',dataList)
}

const sensitiveWord = async(content:string) =>{
    const {result}  = await dyUserPlayingService.sensitiveWord({word:content})
    if(result){
        uni.hideLoading()
        uni.showToast({
            title: '存在敏感词,请重新填写',
            duration: 2000,
            icon:"none"
        });
        return
    }
}

const startTimer = () => {
    setInterval(() => {
        sizeStatus.value =  !sizeStatus.value
    }, 1000); // 每秒执行一次
  };

  const commit = async ()=>{
    if(!manInput.value || !woManInput.value){
        uni.showToast({
        title: "请输入内容",
        duration: 2000,
        icon:"none"
      });
      return
    }
    uni.showLoading({
        title: "加载中",
        icon: "none",
    });
    // 敏感词校验
    await sensitiveWord(manInput.value)
    await sensitiveWord(woManInput.value)
    uni.hideLoading()
    show.value = true
}

onMounted(()=>{
      startTimer()
  })
</script>

<style lang="scss" scoped>
.start{

    input{
        width: 200rpx;
        height: 100rpx;
        position: absolute;
        top: 73%;
        z-index: 10;
        border-radius: 20rpx;
        text-align: center;
    }
    .man{
       left: 15%; 
       background: rgb(213,239,252);
    }
    .woman{
        left: 58%; 
        background: rgb(248,212,250);
    }


    .mr-commit{
      z-index: 102;
      position: absolute;
      top: 100%;
      width: 46%;
      height: 100rpx;
      left: 27%;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
  }
  .mr-commit-big{
      width: 50%;
      height: 105rpx;
      left: 25%;
      transition: all 1s;
  }
  .mr-commit-small{
      width: 46%;
      height: 100rpx;
      left: 27%;
      transition: all 1s;
  }
}

</style>
